<template>
	<view class="page">
		<view class="pt-26">
			<view class="module">
				<view class="flex-b">
					<view>{{data.meetingAddress || ''}}</view>
					<view class="flex">
						<!-- <image style="width: 64rpx; height: 64rpx;margin-right: 16rpx;" src="/static/image/icon-1.png"></image> -->
						<image @click="callPhone()" style="width: 64rpx; height: 64rpx;" src="/static/image/icon-2.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="module list">
			<view class="flex-b item">
				<view class="l-text">名称</view>
				<view>{{data.meetingName || ''}}</view>
			</view>
			<view class="flex-b item">
				<view class="l-text">预定方式</view>
				<view>按小时</view>
			</view>
			<view class="flex-b item">
				<view class="l-text">起订时间</view>
				<view>{{data.startDate || ''}}</view>
			</view>
			<view class="flex-b item">
				<view class="l-text">结束时间</view>
				<view>{{data.endDate || ''}}</view>
			</view>
			<view class="flex-b">
				<view class="l-text">预定时长</view>
				<view>{{data.numHours || ''}}小时</view>
			</view>
		</view>
		<view class="module list">
			<view class="flex-b item">
				<view class="l-text">还需支付</view>
				<view class="f0">
					限时免费
					<!-- ¥680.00 -->
					</view>
			</view>
			<!-- <view class="flex-b">
				<view class="l-text">备注</view>
				<view class="input"> <input  placeholder="请输入您的内容"/>  </view>
			</view> -->
		</view>
	<!-- 	<view class="module">
			<view class="title">支付方式</view>
			<view class="flex-b">
				<view class="flex">
					<image style="width: 44rpx; height: 44rpx;margin-right: 16rpx;" src="/static/image/icon-6.png"></image>
					微信支付
				</view>
				<view class="flex">
					<image style="width: 32rpx; height: 32rpx;" src="/static/image/icon-13.png"></image>
				</view>
			</view>
		</view> -->
		<view class="pf-bottom">
			<view class="">
				<view class="p-text">
					限时免费
					<!-- 需付:<span class="f0">¥140</span> -->
					</view>
				<view class="time">共{{data.numHours}}小时</view>
			</view>
			<view class="btn" @click="open()">确定支付</view>
		</view>
		<uni-popup type="center" ref="popup">
			<view class="open-popup-bg">
				<view class="title">预定成功</view>
				<view class="opne-c">
					<image style="width: 136rpx;height: 136rpx;" src="/static/image/icon-7.png"></image>
					<view class="open-text">您已经预订好了位置，可以在预约界面查看相关的订单!</view>
					<view class="open-btn" @click="confirm()">我知道了</view>
				</view>
				<view style="height: 62rpx;"></view>
				<view class="icon-close" @click="close()"> <image style="width:28rpx;height: 28rpx;" src="/static/image/icon-5.png"></image> </view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { addReserve } from '@/api/main/main';
	export default {
		data(){
			return{
				isShow:true,
				data:{}
			}
		},
		onLoad(o) {
		if (o.item) {
			this.data = JSON.parse(o.item)
		}
	},
		methods:{
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: this.data.phone,
				})
			},
			open(){
				addReserve({
					"meetingId": this.data.id, //会议室id
					"startDate": this.data.startDate, //预约开始i时间
					"endDate": this.data.endDate//预约结束时间
				}).then(res=>{
					if(res.code==200){
						this.$refs.popup.open()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			confirm(){
				this.close()
				uni.switchTab({
					url:'/pages/order/index'
				})
			},
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	.page{
		background: rgba(245, 245, 245, 1);
		height: 100vh;
	}
	.title{
		margin-bottom: 32rpx;
		color: rgba(102, 102, 102, 1);
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.flex-b{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.module{
		background: #fff;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 26rpx;
		padding:28rpx 24rpx;
	}
	.list{
		
	}
	.pt-26{
		padding-top: 26rpx;
	}
	.list .item{
		margin-bottom: 32rpx;
	}
	.input{
		text-align: right;
	}
	.f0{
		color: rgba(216, 31, 37, 1);
		font-weight: 700;
		font-size: 28rpx;
	}
	.l-text{
		color: rgba(102, 102, 102, 1);
	}
	.pf-bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 8rpx 30rpx 42rpx;
	}
	.pf-bottom .btn{
		background: rgba(100, 194, 149, 1);
		border-radius: 50rpx;
		width: 236rpx;
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
	}
	.time{
		font-size: 12px;
		color: rgba(102, 102, 102, 1);
	}
	.open-popup-bg{
		width: 658rpx;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
	}
	.icon-close{
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	.open-popup-bg .title{
		color: rgba(34, 34, 34, 1);
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		padding-top: 32rpx;
		margin-bottom: 64rpx;
	}
	.opne-c{
		text-align: center;
	}
	.open-text{
		width: 460rpx;
		text-align: center;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		margin-left: 100rpx;
		padding: 32rpx 0 120rpx;
	}
	.open-btn{
		background: rgba(100, 194, 149, 1);
		width: 556rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 50rpx;
		margin-left: 46rpx;
	}
</style>